<!DOCTYPE html>
<html>
<head>
    <title>Potential Energy Curves of a Diatomic Molecule</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="600"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style for a hand-drawn look
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2.5;
        ctx.font = '24px "Times New Roman"';
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';
        ctx.textAlign = 'center';
        
        const x0 = 80, y0 = 520;
        const xMax = 550, yMin = 50;

        // --- Draw Axes ---
        ctx.beginPath();
        // Y-axis
        ctx.moveTo(x0, y0);
        ctx.lineTo(x0, yMin);
        // Y-axis Arrow
        ctx.moveTo(x0, yMin);
        ctx.lineTo(x0 - 8, yMin + 12);
        ctx.moveTo(x0, yMin);
        ctx.lineTo(x0 + 8, yMin + 12);
        ctx.stroke();
        // Y-axis Label 'E'
        ctx.fillText('E', x0 - 30, yMin + 10);

        // X-axis
        ctx.beginPath();
        ctx.moveTo(x0, y0);
        ctx.lineTo(xMax, y0);
        // X-axis Arrow
        ctx.moveTo(xMax, y0);
        ctx.lineTo(xMax - 12, y0 - 8);
        ctx.moveTo(xMax, y0);
        ctx.lineTo(xMax - 12, y0 + 8);
        ctx.stroke();
        // X-axis Label 'r'
        ctx.fillText('r', xMax + 20, y0 + 10);

        // --- Potential Energy Curve A (Ground State) ---
        const minAx = 180, minAy = 470;
        ctx.beginPath();
        ctx.moveTo(110, 100);
        ctx.quadraticCurveTo(110, minAy, minAx, minAy);
        ctx.quadraticCurveTo(300, minAy, 370, 270);
        ctx.stroke();
        ctx.fillText('A', 380, 290);

        // --- Vibrational Levels in A ---
        const levelsA = [
            { y: 460, x1: 168, x2: 192 },
            { y: 438, x1: 154, x2: 212, label: '1' },
            { y: 419, x1: 144, x2: 230 },
            { y: 402, x1: 136, x2: 246, label: '3' },
            { y: 387, x1: 130, x2: 260 },
            { y: 374, x1: 125, x2: 274, label: '5' },
            { y: 363, x1: 121, x2: 286 },
            { y: 353, x1: 118, x2: 298, label: '7' },
            { y: 344, x1: 115, x2: 308 }
        ];
        ctx.lineWidth = 2;
        ctx.font = '20px "Times New Roman"';
        levelsA.forEach(level => {
            ctx.beginPath();
            ctx.moveTo(level.x1, level.y);
            ctx.lineTo(level.x2, level.y);
            ctx.stroke();
            if (level.label) {
                ctx.fillText(level.label, level.x2 + 20, level.y + 7);
            }
        });
        ctx.lineWidth = 2.5;
        ctx.font = '24px "Times New Roman"';

        // --- Potential Energy Curve B (Excited State) ---
        const minBx = 290, minBy = 240;
        ctx.beginPath();
        ctx.moveTo(210, 100);
        ctx.quadraticCurveTo(230, minBy, minBx, minBy);
        ctx.quadraticCurveTo(360, minBy, 400, 180);
        ctx.stroke();
        ctx.fillText('B', 410, 190);
        
        // --- Vibrational Levels in B ---
        const levelsB = [
            { y: 232, x1: 275, x2: 305 },
            { y: 218, x1: 260, x2: 320 },
            { y: 205, x1: 250, x2: 333 }
        ];
        ctx.lineWidth = 2;
        levelsB.forEach(level => {
            ctx.beginPath();
            ctx.moveTo(level.x1, level.y);
            ctx.lineTo(level.x2, level.y);
            ctx.stroke();
        });
        ctx.lineWidth = 2.5;

        // --- Dashed Vertical Line ---
        ctx.save();
        ctx.setLineDash([6, 6]);
        ctx.lineWidth = 1.5;
        ctx.beginPath();
        ctx.moveTo(minBx, minBy);
        ctx.lineTo(minBx, y0);
        ctx.stroke();
        ctx.restore();

        // --- Annotations ---
        // r_0B label
        ctx.font = '22px "Times New Roman"';
        ctx.fillText('r', minBx, y0 + 25);
        ctx.font = '16px "Times New Roman"';
        ctx.fillText('0B', minBx + 10, y0 + 30);
        
        // ΔA label and marker (Zero Point Energy)
        ctx.font = '22px "Times New Roman"';
        ctx.fillText('Δ', 130, 465);
        ctx.font = '16px "Times New Roman"';
        ctx.fillText('A', 145, 470);
        ctx.lineWidth = 1.5;
        ctx.beginPath();
        ctx.moveTo(160, minAy); // T-bar at bottom of well
        ctx.lineTo(175, minAy);
        ctx.moveTo(167.5, minAy); // Vertical line
        ctx.lineTo(167.5, levelsA[0].y); // to v=0 level
        // Arrowhead
        ctx.moveTo(167.5, levelsA[0].y);
        ctx.lineTo(164.5, levelsA[0].y + 4);
        ctx.moveTo(167.5, levelsA[0].y);
        ctx.lineTo(170.5, levelsA[0].y + 4);
        ctx.stroke();

        // ΔB label and marker (Vibrational spacing)
        ctx.font = '22px "Times New Roman"';
        ctx.fillText('Δ', 370, 228);
        ctx.font = '16px "Times New Roman"';
        ctx.fillText('B', 385, 233);
        ctx.beginPath();
        const markerBx = 340;
        // Vertical line between v'=0 and v'=1
        ctx.moveTo(markerBx, levelsB[0].y);
        ctx.lineTo(markerBx, levelsB[1].y);
        // Top "corner" bracket
        ctx.moveTo(markerBx, levelsB[1].y);
        ctx.lineTo(markerBx - 8, levelsB[1].y);
        // Bottom "corner" bracket
        ctx.moveTo(markerBx, levelsB[0].y);
        ctx.lineTo(markerBx - 8, levelsB[0].y);
        ctx.stroke();
        
        // --- Figure Caption ---
        ctx.lineWidth = 2.5;
        ctx.font = '24px "Times New Roman"';
        ctx.fillText('Fig. 8.2', 300, y0 + 60);

    </script>
</body>
</html>